<template>
  <a-card :bordered="false" :style="{ marginTop: '12px',height:'450px' }">
    <span slot="title"> <a-icon type="tags" style="color:#3393FC;margin-right: 5px" theme="filled"/>资讯中心</span>
    <a slot="extra" @click="loadMore()">更多</a>
    <template>
      <a-tabs @change="callback">

        <a-tab-pane v-for="(item,index) in tablist" :key="index">
          <a-badge :count="index==0? noticeCount : opinionCount" slot="tab">
            {{ item }}
          </a-badge>
          <a-table
            ref="table"
            size="middle"
            bordered
            :components="draggableComponent"
            rowKey="id"
            :loading="loading"
            :columns="columns"
            :dataSource="dataSource"
            :customRow="customRow"
            :pagination="false"
          >
          </a-table>
        </a-tab-pane>

      </a-tabs>
    </template>
    <noticeSignPublish v-if="tabIndex==0" ref="sign" formType="notice" @ok="findArticleList" @close="findArticleList"/>
    <opinionSignPublish v-else ref="sign" formType="opinion" @ok="findArticleList" @close="findArticleList"/>
  </a-card>
</template>

<script>
import { getAction } from '@/api/manage'
import noticeSignPublish from '@/views/erp/docManage/modules/noticeSignPublish.vue'
import opinionSignPublish from '@/views/erp/docManage/modules/opinionSignPublish.vue'
import moment from 'moment'

export default {
  name: 'EoaDocManage',
  components: {
    noticeSignPublish,
    opinionSignPublish
  },
  data () {
    return {
      columns: [
        {
          title: '标题',
          align: 'left',
          dataIndex: 'title',
          width: 400,
          ellipsis: true
        },
        {
          title: '发布时间',
          width: 200,
          align: 'left',
          ellipsis: true,
          dataIndex: 'publishTime',
          customRender: function (text, item) {
            return text ? moment(text).format('YYYY-MM-DD HH:mm') : '-'
          }
        }, {
          title: '签发状态',
          align: 'left',
          width: 100,
          ellipsis: true,
          dataIndex: 'signStatus_dictText'
      }, {
          title: '阅读状态',
          align: 'left',
          width: 100,
          ellipsis: true,
          dataIndex: 'readStatus_dictText'
      }],
      noticeCount: 0,
      opinionCount: 0,
      dataSource: [],
      loading: false,
      url: {
        publishNotice: '/api/erp/publishNotice/listPage',
        publishCollect: '/api/erp/publishCollect/listPage',
        noticeUnReadCount: '/api/erp/publishNotice/unReadCount', // 通知公告未读
        collectUnReadCount: '/api/erp/publishCollect/unReadCount'// 征集意见未读
      },
      tablist: ['通知公告', '意见征集'],
      params: {
        pageNo: 1,
        pageSize: 5
      },
      tabIndex: 0
    }
  },
  computed: {
    draggableComponent: function() {
      return this.dragResizable(this.columns)
    }
  },
  created() {
    this.findArticleList()
  },
  methods: {
    callback(item) {
      this.tabIndex = item
      this.dataSource = []
      this.findArticleList()
    },
    loadMore() {
      let path = `/erp/docManage/${this.tabIndex == 0 ? 'noticeAnnounceList' : 'opinionCollectList'}`

      let query = {
        id: this.params.columnId
      }
      this.$router.push({ path: path, query: query })
    },
    findArticleList() {
      this.loading = true

      getAction(this.url.noticeUnReadCount).then(res => {
        if (res.success) {
          this.noticeCount = res.result || 0
        }
      })

      getAction(this.url.collectUnReadCount).then(res => {
        if (res.success) {
          this.opinionCount = res.result || 0
        }
      })

      getAction(this.tabIndex == 0 ? this.url.publishNotice : this.url.publishCollect, this.params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records
        }
        this.loading = false
      })
    },
    // table 双击查看详情
    customRow(record) {
      return {
        on: {
          // 单击事件
          click: () => {
            // 如果有签发页面则跳转至签发页面，没有则跳转至查看页面
            if (record.bpmStatus == '3' && record.progress && record.progress != '5') {
              this.$refs.sign.init(record)
            } else {
              this.$refs.sign.init(record, true)
            }
          }
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
/deep/.ant-table-thead > tr > th {
  text-align: center;
}
.top{
  display: inline-block;
  border: 1px solid #1E6FFF;
  padding: 1px 3px;
  margin-left: 4px;
  background: #1E6FFF;
  border-radius: 4px;
  font-size: 12px;
  color: #ffffff;
}
</style>
